<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      
        body{
            background-image: linear-gradient(aqua,pink);
            height: 4000px;
            font-size: 40px;
        }
      
        .footer{
            font-size: 40px;
            margin-top: 3300px;
            color: goldenrod;
        }
        .rocket {
            display: none;
            position: fixed;
            
            right: 67px;
            bottom: 0;
            background-color: transparent;
        width: 145px;
        height: 224px;
        border: none;
        background-image: url(./rocket.png);

      }
      .rocket:hover {
       background-position: -148px 0;
       cursor: pointer;
      }
      .active{
         
         animation:  do 0.4s infinite steps(4)  ; 
      }
      @keyframes do {
        from {
            
          background-position: -296px 0;
        }
        to {
            
          background-position: -892px 0;
        }
      }
    
    </style>

</head>


<body>
        <div>这是顶部了</div>
        
        <div class="footer">这是尾部了</div>
        
        

        <div class="rocket"></div>
        

        <script>
        var rocket = document.querySelector('.rocket');
        var Time= null;
        window.onscroll = function () {
          
            var height = document.documentElement.scrollTop;
           
            if ( height > 300) {
            rocket.style.display='block';
            }else{
                rocket.style.display='none';
               
            }
        };

 rocket.onclick = function(){
   
        //1、获取当前滚动了多少距离
    //2、启动定时器，以一定时间减少响应的滚动距离
    rocket.classList.add('active');
    
       
        Time = setInterval(function() {
        // var scrollTo = document.documentElement.scrollTop || document.body.scrollTop;
        rocket.style.top  =  rocket.offsetTop - 50 +'px';
         document.documentElement.scrollTop -= 150;
       
            // scrollTo -= scrollTo;
            // rocket.style.top = 4000 - height+'px';
            if(document.documentElement.scrollTop<=0){
                rocket.style.top = '';
                scrollTo = 0
                window.clearInterval(Time)
                rocket.classList.remove('active');
                rocket.style.display = 'none';
                Time = null;
            }
              
        }, 20);


    }
    
 



        </script>
</body>
  

</html>